
<template>
  <div class="yj01">
    <!-- :style="opacity:hoverIndex === -1 ? 1 : i === hoverIndex ? 1 : 0.2" -->    
    <div class="item" v-for="(url,i) in images">
      <img 
        crossorigin="anonymous"
        @mouseenter="handleMouseEnter($event.target,i)"
        @mouseleave="handleMouseLeave"
        :src="url"     
        :style="{ opacity: opacityLevel }"
        />
    </div>
  </div>
</template>

<script setup >
import { ref } from 'vue'
import ColorThief from 'colorthief'
const colorThief = new ColorThief();
console.log(colorThief);
const images = ['http://localhost:5173/src/assets/t1.jpeg', 'http://localhost:5173/src/assets/t2.jpg', 'http://localhost:5173/src/assets/t8.jpg', 'http://localhost:5173/src/assets/t7.jpg'];// 	http://localhost:5173/src/assets/t1.jpeg
const html = document.documentElement;

for (let i = 1; i <= 4; i++) { 
  // images.push(`https://picsum.photos/800/800?r=${i}`);  
}

console.log(images);
let hoverIndex = ref(-1);
const opacity = ref(1);
const opacityLevel = ref(1)
async function handleMouseEnter (img,i)  {
  hoverIndex.value = i;
  let color = await colorThief.getPalette(img,3);
  console.log(color);
  color = color.map(c=>`rgb(${c[0]},${c[1]},${c[2]})`);
  console.log(color);
  opacityLevel.value = 0.4;
   html.style.background = 'transparent';
  html.style.setProperty('--c1',color[0]);
  html.style.setProperty('--c2',color[1]);
  html.style.setProperty('--c3',color[2]);
 
  
};
const handleMouseLeave = () => {
  hoverIndex.value = -1;
  opacityLevel.value = 1;
  html.style.background = 'transparent';
  html.style.setProperty('--c1','#fff');
  html.style.setProperty('--c2','#fff');
  html.style.setProperty('--c3','#fff');
};

</script>

<style scoped>
html {
  background: var(--c1);
}
.read-the-docs {
  color: #888;
}
.yj01 {
  width: 90%;
  height: 90vh;
  display: grid;
  margin: 50px auto;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 20px;
}
.item {
  position: relative;
  overflow: hidden;
  transition: 'opacity 0.3s ease'
}
img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
</style>
